<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>lesson 16</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root">

        <counter :count="num" />

        <test :content-abc="123" />
    </div>

    <script>
        // v-bind="params"
        // :content="parmas.content" :a="params.a"
        // 属性传的时候，使用 content-abc 这种命名，接的时候，使用 contentAbc 命名
        // 单项数据流的概念：子组件可以使用父组件传递过来的数据，但是不能修改传递过来的数据
        console.log("单向数据流的理解, mac之后我也不是很喜欢写分号了，无解")
        const app = Vue.createApp({
            data() {
                return {
                    content: "内容",
                    num: 1
                }
            }
        })

        app.component('counter', {
            props: ['count'],
            data() {
                return {
                    myCount: this.count
                }
            },
            template: `<div @click="myCount += 1">{{ myCount }}</div>`
        })

        app.component('test', {
            props: ['contentAbc'],
            template: `<div>{{ contentAbc }}</div>`
        })

        const vm = app.mount('#root')
    </script>
</body>

</html>